import { latestView, list } from '@/services/doc/article'
import { useEffect, useState } from 'react';
import { List, Input, Space, Divider } from 'antd';
import { history, Link } from 'umi';
import styles from './style.less';
import UserBrief from '@/components/UserBrief'
const { Search } = Input;
import { SearchOutlined } from '@ant-design/icons'


const ArticleHome = (props) => {
    const {
        projectId
    } = props;

    const [latestViewDocList, setLatestViewDocList] = useState();
    const [latestViewDocLoading, setLatestViewDocLoading] = useState();
    const [searchValue, setSearchValue] = useState();
    const [searchResult, setSearchResult] = useState();

    const [searchLoading, setSearchLoading] = useState();

    useEffect(() => {
        if (projectId) {
            setLatestViewDocLoading(true)
            latestView(projectId).then(result => {
                setLatestViewDocList(result?.data)
                setLatestViewDocLoading(false)
            })
        }
    }, [projectId])

    const onSearch = () => {
        if (!searchValue || searchValue.trim() === "") {
            return;
        }
        list(projectId, {
            searchText: searchValue
        }).then(result => {
            setSearchResult(result?.data)
        })
    }
    return <div className={styles.homeBody}>
        <div>
            <div className={styles.searchInput}>
                <Input bordered={false}
                    onChange={(e) => {
                        setSearchValue(e.target.value)
                    }}
                    onPressEnter={onSearch}
                    prefix={<SearchOutlined />} placeholder={"文章标题/摘要"}></Input>
            </div>
        </div>
        {searchResult && <div className={styles.latestViewList}>
            <Divider orientation="left" className={styles.divider}>搜索结果</Divider>
            <List
                dataSource={searchResult}
                locale={{
                    emptyText:"无结果"
                }}
                renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                            title={<Space align="end">
                                <Link className={styles.docTitle} to={`/projects/${projectId}/article/${item?.id}`}>{item?.name}</Link>
                            </Space>}
                            description={item?.abstractTitle}
                        />
                        <div>
                            <UserBrief user={item?.user} />
                            <div className={styles.viewTime}>创建时间： {item.createTime}</div>
                        </div>
                    </List.Item>
                )
                }
            ></List>
        </div>}
        <div className={styles.latestViewList}>
            <Divider orientation="left" className={styles.divider}>最近访问</Divider>
            <List
                loading={latestViewDocLoading}
                dataSource={latestViewDocList}
                renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                            title={<Space align="end">
                                <Link className={styles.docTitle} to={`/projects/${projectId}/article/${item?.data?.id}`}>{item?.data?.name}</Link>
                                <div className={styles.authorName}><UserBrief showAvatar={false} user={item?.data?.user} /></div>
                            </Space>}
                            description={item?.data?.abstractTitle}
                        />
                        <div className={styles.viewTime}>{item.createTime} 查看</div>
                    </List.Item>
                )
                }
            ></List>
        </div>

    </div>
}

export default ArticleHome;